"use client"

import { AiFillAndroid  } from "react-icons/ai";

/**
 * 导航条
 * @returns {JSX.Element}
 * @constructor
 */
export default function Nav() {

  const titles = [
    "Button",
    "Log in/Sign up",
    "Table",
    "CSS Illustration",
    "File Upload",
    "Text Effect",
    "Slider",
    "Select",
    "Chat/Message",
    "Card/Widget",
    "Switch/Toggle",
    "Carousel",
    "Accordion",
    "Chart/Graph",
    "Cool/Animation",
    "Border",
    "Social/Icon Butto",
    "Tab",
    "Loading",
    "SVG illustration",
    "Payment",
    "Progress Bar",
    "Misc",
    "Checkbox Radio",
    "App Interactive",
    "Calendar/Datepick",
    "404 Page",
    "Form",
    "Image",
  ]
  return (
    <aside className="bg-[#222] h-screen w-72 flex flex-col font-mono text-white">
      <nav className="flex h-20 p-5 items-center border-b border-b-slate-400 group cursor-pointer" >
        <a className="text-indigo-400 flex flex-row items-center gap-3 group-hover:scale-105 duration-300" href="">
          <AiFillAndroid className="text-2xl "/>
          <span className="text-3xl">Navbar</span>
        </a>
      </nav>
      <ul className="h-full p-5 overflow-y-scroll flex flex-col gap-y-3
                     [&::-webkit-scrollbar]:w-[5px]
                     [&::-webkit-scrollbar-thumb]:bg-pink-600
                     [&::-webkit-scrollbar-thumb]:rounded-full
                     [&::-webkit-scrollbar-track]:bg-slate-300
      ">
        {
          titles.map((title,index)=>(
            <li key={index} className="pb-3 relative text-slate-400 hover:text-pink-500 duration-300 group">
              {title}
              <span className="absolute left-0 bottom-2 h-0.5 w-0 bg-pink-500 group-hover:w-full duration-300"></span>
            </li>
          ))
        }
      </ul>
    </aside>
  )
}
